<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烧烤大亨专业版</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #FF6B35;
            --secondary-color: #e67c3e;
            --dark-bg: #1a1200;
            --panel-bg: rgba(44, 28, 8, 0.85);
            --card-bg: rgba(80, 40, 10, 0.6);
            --text-light: #f5f2e9;
            --text-accent: #FFA62B;
            --success: #2ecc71;
            --warning: #f39c12;
            --danger: #c92c2c;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            background: radial-gradient(circle at center, #2a1500 0%, #1a0b00 100%);
            color: var(--text-light);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: hidden;
            padding: 20px;
        }
        
        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 极 100 100"><rect width="100" height="100" fill="%23c92c2c" opacity="0.03"/><path d="M10,10 L50,50 L90,10" stroke="%23800" stroke-width="1" opacity="0.2"/></svg>');
            opacity: 0.7;
            z-index: -1;
        }
        
        .game-container {
            max-width: 1400px;
            width: 95%;
            margin: 20px auto;
            background: linear-gradient(to bottom, #2c1a08, #1a0f00);
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
            overflow: hidden;
            border: 2px solid #7a3b0d;
            z-index: 10;
        }
        
        /* 顶部标题栏 */
        .header {
            background: linear-gradient(to right, #c92c2c, #8B0000);
            color: white;
            padding: 20px 30px;
            text-align: center;
            position: relative;
            border-bottom: 4px solid var(--primary-color);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        
        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .title-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .bbq-icon {
            font-size: 3.5rem;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
        }
        
        .title-section h1 {
            font-size: 2.5rem;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            margin: 0;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            letter-spacing: 1px;
        }
        
        /* 状态栏 */
        .stats-bar {
            display: flex;
            justify-content: space-between;
            background: var(--secondary极);
            padding: 18px 20px;
            color: white;
            font-size: 1.1rem;
            flex-wrap: wrap;
            gap: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .stats-bar > div {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 12px;
            background: rgba(0,0,0,0.2);
            border-radius: 50px;
            min-width: 160px;
        }
        
        .stats-bar .icon {
            font-size: 1.5rem;
        }
        
        /* 主内容区 */
        .game-content {
            display: flex;
            padding: 25px;
            gap: 25px;
        }
        
        /* 左侧菜单区域 */
        .left-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 25px;
            min-width: 280px;
        }
        
        /* 右侧内容区 */
        .right-panel {
            flex: 2.5;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .panel {
            background: var(--panel-bg);
            border-radius: 18px;
            padding: 22px;
            border: 1px solid #5a3e12;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.4), 
                        0 4px 12px rgba(0,0,0,0.3);
        }
        
        .panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .panel-title {
            font-size: 1.4rem;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--primary-color);
            color: var(--text-accent);
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 500;
        }
        
        .panel-title .icon {
            font-size: 1.8rem;
        }
        
        /* 按钮和操作 */
        .actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 18px;
            margin-bottom: 20px;
        }
        
        .btn {
            background: linear-gradient(to bottom, #e67c3e, #c54e22);
            color: white;
            border: none;
            padding: 22px 15px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 1.15rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 14px;
            height: 100%;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            transition: all 0.6s;
            pointer-events: none;
        }
        
        .btn:hover, .btn:active {
            background: linear-gradient(to bottom, #c92c2c, #a61c1c);
            transform: translateY(-5px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
        }
        
        .btn:hover::before {
            top: 0;
            left: 0;
        }
        
        .btn-icon {
            font-size: 2.2rem;
        }
        
        /* 资源卡片 */
        .resources-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 18px;
            margin: 20px 0;
        }
        
        .resource-item {
            display: flex;
            align-items: center;
            background: var(--card-bg);
            padding: 15px;
            border-radius: 12px;
            gap: 14px;
            transition: all 0.3s;
            border: 1px solid #7a3b0d;
        }
        
        .resource-item:hover {
            transform: translateY(-3px);
            background: rgba(90, 50, 15, 0.7);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        
        .resource-icon {
            font-size: 2rem;
            color: var(--text-accent);
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .resource-info {
            flex: 1;
        }
        
        .resource-info div:first-child {
            font-size: 1.1rem;
            margin-bottom: 3px;
            font-weight: 500;
        }
        
        /* 进度条 */
        .progress-container {
            margin: 25px 0;
            padding: 15px;
            background: var(--card-bg);
            border-radius: 12px;
        }
        
        .progress-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .progress-bar {
            height: 18px;
            background: #3d2a10;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
        }
        
        .progress-value {
            height: 100%;
            background: linear-gradient(to right, #FF6B35, #c92c2c);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }
        
        .progress-value::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0.2) 50%, 
                rgba(255,255,255,0) 100%);
            animation: progress-glow 2s infinite;
        }
        
        @keyframes progress-glow {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(200%); }
        }
        
        /* 店铺升级 */
        .upgrades-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }
        
        .upgrade-card {
            background: var(--card-bg);
            border-radius: 18px;
            padding: 25px;
            border: 1px solid #7a3b0d;
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: all 0.3s;
        }
        
        .upgrade-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.4);
            background: rgba(90, 50, 15, 0.7);
            border-color: var(--primary-color);
        }
        
        .upgrade-card.unlocked {
            background: rgba(40, 80, 40, 0.4);
            border-color: #2e8b57;
        }
        
        .upgrade-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }
        
        .upgrade-icon {
            font-size: 2.5rem;
            color: var(--text-accent);
        }
        
        .upgrade-info {
            flex: 1;
        }
        
        .upgrade-info h3 {
            font-size: 1.4rem;
            color: var(--text-accent);
            margin-bottom: 5px;
        }
        
        .upgrade-price {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.2rem;
            color: #FFD700;
            margin: 10px 0;
        }
        
        .upgrade-price .icon {
            font-size: 1.8rem;
        }
        
        .buy-btn {
            background: linear-gradient(to bottom, #3c8c40, #2a6933);
            color: white;
            border: none;
            padding: 12px 18px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 500;
            transition: all 0.3s;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .buy-btn:hover {
            background: linear-gradient(to bottom, #4da052, #388a3a);
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        
        .buy-btn:disabled {
            background: #7a6c5d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        /* 经营日志 */
        .log-container {
            background: rgba(20, 12, 0, 0.8);
            border-radius: 15px;
            border: 1px solid #7a3b0d;
            padding: 15px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .log-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .log-content {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            background: rgba(10, 6, 0, 0.6);
            border-radius: 10px;
            border: 1px solid #5a3e12;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) #2a1a05;
        }
        
        .log-content::-webkit-scrollbar {
            width: 10px;
        }
        
        .log-content::-webkit-scrollbar-track {
            background: #2a1a05;
            border-radius: 5px;
        }
        
        .log-content::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 5极;
        }
        
        .event {
            padding: 18px;
            margin: 15px 0;
            background: rgba(90, 50, 15, 0.4);
            border-radius: 12px;
            border-left: 5px solid var(--secondary-color);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
        }
        
        .event:hover {
            transform: translateX(5px);
            border-left-color: var(--primary-color);
        }
        
        .event-success {
            border-left-color: var(--success);
        }
        
        .event-warning {
            border-left-color: var(--warning);
        }
        
        .event-danger {
            border-left-color: var(--danger);
        }
        
        .event-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--text-accent);
        }
        
        .event-date {
            font-size: 0.9rem;
            opacity: 0.7;
            margin-left: auto;
        }
        
        /* 通知 */
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary-color);
            color: white;
            padding: 15px 35px;
            border-radius: 50px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.4);
            z-index: 100;
            animation: fadeInOut 2.5s ease-in-out;
            display: none;
            font-size: 1.1rem;
            font-weight: 500;
        }
        
        @keyframes fadeInOut {
            0% { opacity: 0; top: 0; }
            10% { opacity: 1; top: 20px; }
            90% { opacity: 1; top: 20px; }
            100% { opacity: 0; top: 0; }
        }
        
        /* 店铺视觉效果 */
        .shop-visual {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background: rgba(0,0,0,0.3);
            border-radius: 15px;
            position: relative;
            min-height: 200px;
            border: 1px solid #7a3b0d;
        }
        
        .shop-image {
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg, #c92c2c, #e67c3e);
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
            margin-bottom: 30px;
            position: relative;
            animation: float 4s ease-in-out infinite;
        }
        
        .shop-image::after {
            content: '🔥';
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 2.5rem;
            animation: flame 1.5s ease-in-out infinite alternate;
        }
        
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0); }
        }
        
        @keyframes flame {
            0% { transform: translateX(-50%) scale(1); }
            100% { transform: translateX(-50%) scale(1.1); }
        }
        
        .customers {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .customer {
            width: 40px;
            height: 40px;
            background: #8e44ad;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            animation: popIn 0.5s ease-out;
        }
        
        @keyframes popIn {
            0% { transform: scale(0); opacity: 0; }
            70% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }
        
        /* 响应式设计 */
        @media (max-width: 1100px) {
            .game-content {
                flex-direction: column;
            }
            
            .left-panel {
                flex-direction: row;
                gap: 20px;
                flex-wrap: wrap;
            }
            
            .panel {
                flex: 1;
                min-width: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 20px;
            }
            
            .stats-bar {
                flex-direction: column;
                align-items: center;
            }
            
            .stats-bar > div {
                width: 100%;
            }
            
            .left-panel {
                flex-direction: column;
            }
            
            .actions-grid {
                grid-template-columns: 1fr;
            }
            
            .title-section h1 {
                font-size: 2rem;
            }
        }
        
        /* 装饰元素 */
        .decoration {
            position: absolute;
            z-index: 0;
            pointer-events: none;
        }
        
        .decoration.grill {
            top: 10%;
            right: 5%;
            font-size: 6rem;
            transform: rotate(15deg);
            opacity: 0.1;
            animation: rotateSlow 30s infinite linear;
        }
        
        .decoration.smoke {
            bottom: 15%;
            left: 5%;
            font-size: 8rem;
            opacity: 0.07;
            animation: smokeAnimation 8s infinite ease-in-out;
        }
        
        @keyframes rotateSlow {
            0% { transform: rotate(15deg); }
            100% { transform: rotate(375deg); }
        }
        
        @keyframes smokeAnimation {
            0% { transform: scale(1); opacity: 0.05; }
            50% { transform: scale(1.3) translateY(-20px); opacity: 0.1; }
            100% { transform: scale(1); opacity: 0.05; }
        }
        
        /* 状态提示 */
        .status-hint {
            font-size: 0.9rem;
            text-align: center;
            padding: 10px;
            background: rgba(0,0,0,0.3);
            border-radius: 8px;
            margin-top: 10px;
            color: var(--text-accent);
        }
    </style>
</head>
<body>
    <!-- 装饰元素 -->
    <div class="decoration grill">🍢</div>
    <div class="decoration smoke">🍖</div>
    
    <!-- 通知区域 -->
    <div id="notification" class="notification"></div>
    
    <!-- 游戏主容器 -->
    <div class="game-container">
        <!-- 标题栏 -->
        <div class="header">
            <div class="header-content">
                <div class="title-section">
                    <div class="bbq-icon">🍢</div>
                    <h1>烧烤大亨专业版</h1>
                </div>
                <div class="subtitle">123团队出品 - 流畅游戏体验</div>
            </div>
        </div>
        
        <!-- 状态栏 -->
        <div class="stats-bar">
            <div>
                <span class="material-icons icon">account_balance_wallet</span>
                <span>现金: ¥<span id="money">1000</span></span>
            </div>
            <div>
                <span class="material-icons icon">stars</span>
                <span>声望: <span id="reputation">10</span></span>
            </div>
            <div>
                <span class="material-icons icon">calendar_today</span>
                <span>天数: <span id="day">1</span></span>
            </div>
            <div>
                <span class="material-icons icon">local_fire_department</span>
                <span>烤炉: <span id="grill-health">100</span>%</span>
            </div>
            <div>
                <span class="material-icons icon">group</span>
                <span>顾客: <span id="customers">0</span>/日</span>
            </div>
        </div>
        
        <!-- 主游戏内容 -->
        <div class="game-content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <!-- 经营操作面板 -->
                <div class="panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <span class="material-icons icon">restaurant</span>
                            今日操作
                        </div>
                    </div>
                    
                    <div class极actions-grid">
                        <button class="btn" id="buy-supplies-btn">
                            <span class="material-icons btn-icon">shopping_cart</span>
                            <span>采购食材</span>
                        </button>
                        
                        <button class="btn" id="open-shop-btn">
                            <span class="material-icons btn-icon">store</span>
                            <span>开门营业</span>
                        </button>
                        
                        <button class="btn" id="manage-menu-btn">
                            <span class="material-icons btn-icon">restaurant_menu</span>
                            <span>调整菜单</span>
                        </button>
                        
                        <button class="btn" id="repair-grill-btn">
                            <span class="material-icons btn-icon">build</span>
                            <span>修理烤炉</span>
                        </button>
                    </div>
                    
                    <!-- 资源信息 -->
                    <div class="panel-title">
                        <span class="material-icons icon">inventory</span>
                        库存状态
                    </div>
                    <div class="resources-container">
                        <!-- 羊肉串资源卡片 -->
                        <div class="resource-item">
                            <div class="resource-icon">
                                <span class="material-icons">local_dining</span>
                            </div>
                            <div class="resource-info">
                                <div>羊肉串</div>
                                <div><span id="lamb-stock">0</span>份</div>
                            </div>
                        </div>
                        
                        <!-- 牛肉串资源卡片 - 修复标签问题 -->
                        <div class="resource-item">
                            <div class="resource-icon">
                                <span class="material-icons">local_dining</span>
                            </div>
                            <div class="resource-info">
                                <div>牛肉串</div>
                                <div><span id="beef-stock">0</span>份</div>
                            </div>
                        </div>
                        
                        <!-- 鸡翅资源卡片 -->
                        <div class="resource-item">
                            <div class="resource-icon">
                                <span class="material-icons">local_dining</span>
                            </div>
                            <div class="resource-info">
                                <div>鸡翅</div>
                                <div><span id="chicken-stock">0</span>份</div>
                            </div>
                        </div>
                        
                        <!-- 蔬菜资源卡片 -->
                        <div class="resource-item">
                            <div class="resource-icon">
                                <span class="material-icons">local_dining</span>
                            </div>
                            <div class="resource-info">
                                <div>蔬菜</div>
                                <div><span id="veggies-stock">0</span>份</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 提示信息 -->
                    <div class="status-hint">
                        提示：库存不足时无法营业，请先采购食材！
                    </div>
                    
                    <!-- 烤炉状态 -->
                    <div class="progress-container">
                        <div class="progress-title">
                            <span>烧烤炉状态</span>
                            <span><span id="grill-percent">100</span>%</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-value" style="width: 100%"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 店铺效果 -->
                <div class="panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <span class="material-icons icon">storefront</span>
                            店铺预览
                        </div>
                    </div>
                    
                    <div class="shop-visual">
                        <div class="shop-image"></div>
                        <h3 id="shop-name">飘香烧烤摊</h3>
                        <div>日客流: <span id="daily-customers">0</span>人</div>
                        
                        <div class="customers" id="customer-container">
                            <!-- 顾客图标将通过JS动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧面板 -->
            <div class="right-panel">
                <!-- 升级面板 -->
                <div class="panel">
                    <div class="panel-header">
                        <div class="panel-title">
                            <span class="material-icons icon">upgrade</span>
                            店铺升级
                        </div>
                        <div style="opacity: 0.7;">升级点: <span id="upgrade-points">0</span></div>
                    </div>
                    
                    <div class="upgrades-grid">
                        <!-- 烤炉升级卡片 -->
                        <div class="upgrade-card" id="upgrade-1">
                            <div class="upgrade-header">
                                <span class="material-icons upgrade-icon">local_fire_department</span>
                                <div class="upgrade-info">
                                    <h3>炭火烤炉升级</h3>
                                    <div>提升烧烤效率30%</div>
                                </div>
                            </div>
                            <div class="upgrade-price">
                                <span class="material-icons">attach_money</span>
                                <span>¥1200</span>
                            </div>
                            <div>减少烤制时间，加快服务速度，提高客户满意度</div>
                            <button class="buy-btn" id="buy-upgrade-1">
                                <span class="material-icons">upgrade</span>
                                立即升级
                            </button>
                        </div>
                        
                        <!-- 店面升级卡片 -->
                        <div class="upgrade-card" id="upgrade-2">
                            <div class="upgrade-header">
                                <span class="material-icons upgrade-icon">home</span>
                                <div class="upgrade-info">
                                    <h3>扩大店面</h3>
                                    <div>增加顾客容量</div>
                                </div>
                            </div>
                            <div class="upgrade-price">
                                <span class="material-icons">attach_money</span>
                                <span>¥3800</span>
                            </div>
                            <div>提供更多座位，单日可接待更多客人（+10容量）</div>
                            <button class="buy-btn" id="buy-upgrade-2">
                                <span class="material-icons">lock</span>
                                资金不足
                            </button>
                        </div>
                        
                        <!-- 招牌升级卡片 -->
                        <div class="upgrade-card" id="upgrade-3">
                            <div class="upgrade-header">
                                <span class="material-icons upgrade-icon">stars</span>
                                <div class="upgrade-info">
                                    <h3>招牌升级</h3>
                                    <div>吸引高端客群</div>
                                </div>
                            </div>
                            <div class="upgrade-price">
                                <span class="material-icons">attach_money</span>
                                <span>¥6200</span>
                            </div>
                            <div>聘请专业设计师打造招牌，吸引更高消费能力人群</div>
                            <button class="buy-btn" id="buy-upgrade-3" disabled>
                                <span class="material-icons">lock</span>
                                声望不足
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 经营日志 -->
                <div class="panel">
                    <div class="log-container">
                        <div class="log-header">
                            <div class="panel-title">
                                <span class="material-icons icon">event_note</span>
                                经营日志
                            </div>
                            <button id="clear-log" style="background: none; border: none; color: var(--text-accent); cursor: pointer;">
                                <span class="material-icons">delete_sweep</span>
                            </button>
                        </div>
                        
                        <div class="log-content" id="game-log">
                            <!-- 日志将通过JS动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 游戏状态 - 完全修复版
        const gameState = {
            money: 1000,
            reputation: 10,
            day: 1,
            grillHealth: 100,
            inventory: {
                lamb: 0,
                beef: 0,
                chicken: 0,
                veggies: 0
            },
            stats: {
                totalRevenue: 0,
                dailyCustomers: 0,
                bestDay: 0
            },
            upgrades: {
                grill: false,
                space: false,
                sign: false
            },
            eventLog: []
        };

        // 食物价格
        const foodPrices = {
            lamb: 15,
            beef: 12,
            chicken: 10,
            veggies: 8
        };
        
        // 食材采购价格
        const supplyPrices = {
            lamb: 8,
            beef: 7,
            chicken: 6,
            veggies: 3
        };
        
        // 顾客表情图标
        const customerIcons = ['👍', '🍢', '😋', '😍', '🔥', '🌟', '💯', '🥩', '🍗', '🥦'];
        
        // 采购食材
        function buySupplies() {
            // 每次采购数量
            const lambQty = 20;
            const beefQty = 15;
            const chickenQty = 15;
            const veggiesQty = 30;
            
            // 计算总成本
            const cost = 
                lambQty * supplyPrices.lamb + 
                beefQty * supplyPrices.beef + 
                chickenQty * supplyPrices.chicken + 
                veggiesQty * supplyPrices.veggies;
            
            // 检查资金是否足够
            if (gameState.money < cost) {
                showNotification(`资金不足！需要 ¥${cost}，但您只有 ¥${gameState.money}`);
                return;
            }
            
            // 增加库存
            gameState.inventory.lamb += lambQty;
            gameState.inventory.beef += beefQty;
            gameState.inventory.chicken += chickenQty;
            gameState.inventory.veggies += veggiesQty;
            
            // 扣除现金
            gameState.money -= cost;
            
            // 添加日志
            addLogEvent(`采购完成：羊肉串×${lambQty} 牛肉串×${beefQty} 鸡翅×${chickenQty} 蔬菜×${veggiesQty}`);
            addLogEvent(`支出：¥${cost}`, "info");
            
            // 更新UI
            updateGameUI();
            showNotification("食材采购成功！");
        }
        
        // 开门营业
        function openForBusiness() {
            // 检查库存是否足够营业
            const minStock = 10;
            if (gameState.inventory.lamb < minStock || 
                gameState.inventory.beef < minStock || 
                gameState.inventory.chicken < minStock || 
                gameState.inventory.veggies < minStock) {
                
                showNotification("库存不足！无法开业");
                return;
            }
            
            // 烤炉损耗 (5-15%)
            const grillLoss = 5 + Math.floor(Math.random() * 11);
            gameState.grillHealth -= grillLoss;
            if (gameState.grillHealth < 0) gameState.grillHealth = 0;
            
            // 计算顾客数量
            let customerBase = 8;
            
            // 升级加成
            if (gameState.upgrades.grill) customerBase += 3;
            if (gameState.upgrades.space) customerBase += 5;
            if (gameState.upgrades.sign) customerBase += 8;
            
            // 声望加成
            const reputationBonus = Math.floor(gameState.reputation / 5);
            
            // 计算顾客总数
            const totalCustomers = customerBase + reputationBonus;
            gameState.stats.dailyCustomers = totalCustomers;
            
            // 食材消耗量
            const lambUsed = Math.min(3 + Math.floor(totalCustomers * 0.3), gameState.inventory.lamb);
            const beefUsed = Math.min(2 + Math.floor(totalCustomers * 0.2), gameState.inventory.beef);
            const chickenUsed = Math.min(2 + Math.floor(totalCustomers * 0.2), gameState.inventory.chicken);
            const veggiesUsed = Math.min(4 + Math.floor(totalCustomers * 0.3), gameState.inventory.veggies);
            
            // 更新库存
            gameState.inventory.lamb -= lambUsed;
            gameState.inventory.beef -= beefUsed;
            gameState.inventory.chicken -= chickenUsed;
            gameState.inventory.veggies -= veggiesUsed;
            
            // 计算收入
            const lambRevenue = lambUsed * foodPrices.lamb;
            const beefRevenue = beefUsed * foodPrices.beef;
            const chickenRevenue = chickenUsed * foodPrices.chicken;
            const veggiesRevenue = veggiesUsed * foodPrices.veggies;
            
            const totalRevenue = lambRevenue + beefRevenue + chickenRevenue + veggiesRevenue;
            
            // 更新资金
            gameState.money += totalRevenue;
            gameState.stats.totalRevenue += totalRevenue;
            
            // 更新最高单日收入
            if (totalRevenue > gameState.stats.bestDay) {
                gameState.stats.bestDay = totalRevenue;
            }
            
            // 天数增加
            gameState.day++;
            
            // 声望随机增长
            gameState.reputation += Math.floor(Math.random() * 3) + 1;
            
            // 添加日志
            addLogEvent(`第${gameState.day-1}天营业结束！`, "success");
            addLogEvent(`服务顾客：${totalCustomers}人，收入：¥${totalRevenue}`);
            addLogEvent(`食材消耗：羊肉串${lambUsed} 牛肉串${beefUsed} 鸡翅${chickenUsed} 蔬菜${veggiesUsed}`);
            
            // 烤炉故障事件
            if (gameState.grillHealth < 40 && Math.random() < 0.3) {
                const lostCustomers = Math.floor(totalCustomers * 0.3);
                addLogEvent(`烤炉故障！损失了${lostCustomers}位顾客`, "danger");
            }
            
            // 随机事件（美食博主）
            if (Math.random() < 0.2) {
                const extraRep = 5 + Math.floor(Math.random() * 6);
                gameState.reputation += extraRep;
                addLogEvent(`美食博主推荐！声望+${extraRep}`, "success");
            }
            
            // 更新UI
            updateGameUI();
            showNotification(`营业成功！收入 ¥${totalRevenue}`);
        }
        
        // 调整菜单
        function manageMenu() {
            // 随机调整价格
            const changes = {
                lamb: Math.floor(Math.random() * 3) - 1,
                beef: Math.floor(Math.random() * 3) - 1,
                chicken: Math.floor(Math.random() * 3) - 1,
                veggies: Math.floor(Math.random() * 3) - 1
            };
            
            // 应用价格变动
            for (const item in foodPrices) {
                foodPrices[item] = Math.max(5, foodPrices[item] + changes[item]);
            }
            
            // 声望增加
            gameState.reputation += Math.floor(Math.random() * 3) + 1;
            
            // 添加日志
            let priceUpdate = "新价格：";
            for (const item in foodPrices) {
                const itemName = {
                    lamb: "羊肉串",
                    beef: "牛肉串",
                    chicken: "鸡翅",
                    veggies: "蔬菜"
                }[item];
                priceUpdate += `${itemName}¥${foodPrices[item]} `;
            }
            
            addLogEvent("菜单已调整：" + priceUpdate);
            
            // 更新UI
            updateGameUI();
            showNotification("菜单调整完成！");
        }
        
        // 修理烤炉
        function repairGrill() {
            // 检查烤炉状态
            if (gameState.grillHealth > 90) {
                showNotification("烤炉状态良好，无需修理");
                return;
            }
            
            // 计算修理成本
            const cost = Math.ceil((100 - gameState.grillHealth) * 5);
            
            // 检查资金是否足够
            if (gameState.money < cost) {
                showNotification(`资金不足！需要 ¥${cost}，但您只有 ¥${gameState.money}`);
                return;
            }
            
            // 执行修理
            gameState.money -= cost;
            gameState.grillHealth = 100;
            
            // 添加日志
            addLogEvent(`烤炉修理完成，花费 ¥${cost}`);
            
            // 更新UI
            updateGameUI();
            showNotification("烤炉已完全修复！");
        }
        
        // 购买升级
        function buyUpgrade(upgradeId) {
            let cost, successMessage;
            
            switch (upgradeId) {
                case 1: // 烤炉升级
                    cost = 1200;
                    successMessage = "烤炉升级完成！效率提升30%";
                    
                    if (gameState.money < cost) {
                        showNotification(`需要 ¥${cost}，但您只有 ¥${gameState.money}`);
                        return;
                    }
                    
                    gameState.money -= cost;
                    gameState.upgrades.grill = true;
                    break;
                    
                case 2: // 店面升级
                    cost = 3800;
                    successMessage = "店面扩大完成！可接待更多顾客";
                    
                    if (gameState.money < cost) {
                        showNotification(`需要 ¥${cost}，但您只有 ¥${gameState.money}`);
                        return;
                    }
                    
                    gameState.money -= cost;
                    gameState.upgrades.space = true;
                    break;
                    
                case 3: // 招牌升级
                    cost = 6200;
                    successMessage = "招牌升级完成！吸引高端顾客";
                    
                    if (gameState.money < cost) {
                        showNotification(`需要 ¥${cost}，但您只有 ¥${gameState.money}`);
                        return;
                    }
                    
                    if (gameState.reputation < 30) {
                        showNotification("声望不足30，无法购买此升级！");
                        return;
                    }
                    
                    gameState.money -= cost;
                    gameState.upgrades.sign = true;
                    gameState.reputation += 10;
                    break;
            }
            
            // 添加日志
            addLogEvent(`购买了升级项目${upgradeId}，花费 ¥${cost}`, "success");
            
            // 更新UI
            updateGameUI();
            showNotification(successMessage);
        }
        
        // 添加日志事件
        function addLogEvent(message, type = "info") {
            const event = {
                message: message,
                type: type,
                day: `第${gameState.day}天`
            };
            
            gameState.eventLog.push(event);
            
            // 限制日志长度
            if (gameState.eventLog.length > 15) {
                gameState.eventLog.shift();
            }
            
            // 更新日志显示
            updateLogDisplay();
        }
        
        // 更新游戏UI
        function updateGameUI() {
            // 更新顶部状态
            document.getElementById('money').textContent = gameState.money;
            document.getElementById('reputation').textContent = gameState.reputation;
            document.getElementById('day').textContent = gameState.day;
            document.getElementById('grill-health').textContent = gameState.grillHealth;
            document.getElementById('customers').textContent = gameState.stats.dailyCustomers;
            
            // 更新库存显示
            document.getElementById('lamb-stock').textContent = gameState.inventory.lamb;
            document.getElementById('beef-stock').textContent = gameState.inventory.beef;
            document.getElementById('chicken-stock').textContent = gameState.inventory.chicken;
            document.getElementById('veggies-stock').textContent = gameState.inventory.veggies;
            
            // 更新烤炉状态条
            document.getElementById('grill-percent').textContent = gameState.grillHealth;
            document.querySelector('.progress-value').style.width = gameState.grillHealth + '%';
            
            // 更新顾客数量和预览
            document.getElementById('daily-customers').textContent = gameState.stats.dailyCustomers;
            generateCustomerIcons();
            
            // 更新升级按钮状态
            updateUpgradeButtons();
        }
        
        // 更新日志显示
        function updateLogDisplay() {
            const logContainer = document.getElementById('game-log');
            logContainer.innerHTML = '';
            
            // 渲染所有日志
            gameState.eventLog.forEach(event => {
                const eventDiv = document.createElement('div');
                eventDiv.className = `event ${event.type ? 'event-' + event.type : ''}`;
                
                const icon = event.type === 'success' ? 'celebration' : 
                             event.type === 'danger' ? 'error' : 
                             event.type === 'warning' ? 'warning' : 'info';
                
                eventDiv.innerHTML = `
                    <div class="event-title">
                        <span class="material-icons">${icon}</span>
                        ${event.day}
                        <span class="event-date"></span>
                    </div>
                    <p>${event.message}</p>
                `;
                
                logContainer.appendChild(eventDiv);
            });
            
            // 滚动到底部显示最新日志
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        // 更新升级按钮状态
        function updateUpgradeButtons() {
            // 烤炉升级按钮
            const btn1 = document.getElementById('buy-upgrade-1');
            if (gameState.upgrades.grill) {
                btn1.disabled = true;
                btn1.innerHTML = '<span class="material-icons">done</span> 已升级';
            } else {
                btn1.disabled = false;
                btn1.innerHTML = '<span class="material-icons">upgrade</span> 立即升级';
            }
            
            // 店面升级按钮
            const btn2 = document.getElementById('buy-upgrade-2');
            if (gameState.upgrades.space) {
                btn2.disabled = true;
                btn2.innerHTML = '<span class="material-icons">done</span> 已升级';
            } else {
                btn2.disabled = false;
                if (gameState.money < 3800) {
                    btn2.innerHTML = '<span class="material-icons">lock</span> 资金不足';
                } else {
                    btn2.innerHTML = '<span class="material-icons">upgrade</span> 立即升级';
                }
            }
            
            // 招牌升级按钮
            const btn3 = document.getElementById('buy-upgrade-3');
            if (gameState.upgrades.sign) {
                btn3.disabled = true;
                btn3.innerHTML = '<span class="material-icons">done</span> 已升级';
            } else {
                if (gameState.money < 6200 || gameState.reputation < 30) {
                    btn3.disabled = true;
                    if (gameState.money < 6200) {
                        btn3.innerHTML = '<span class="material-icons">lock</span> 资金不足';
                    } else {
                        btn3.innerHTML = '<span class="material-icons">lock</span> 声望不足';
                    }
                } else {
                    btn3.disabled = false;
                    btn3.innerHTML = '<span class="material-icons">upgrade</span> 立即升级';
                }
            }
        }
        
        // 生成顾客图标
        function generateCustomerIcons() {
            const container = document.getElementById('customer-container');
            container.innerHTML = '';
            
            const customerCount = Math.min(gameState.stats.dailyCustomers, 12);
            
            for (let i = 0; i < customerCount; i++) {
                const icon = customerIcons[Math.floor(Math.random() * customerIcons.length)];
                const customer = document.createElement('div');
                customer.className = 'customer';
                customer.textContent = icon;
                customer.style.animationDelay = `${i * 0.1}s`;
                container.appendChild(customer);
            }
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.style.display = 'block';
            
            setTimeout(() => {
                notification.style.display = 'none';
            }, 2500);
        }
        
        // 初始化事件绑定
        function bindEventListeners() {
            // 绑定操作按钮
            document.getElementById('buy-supplies-btn').addEventListener('click', buySupplies);
            document.getElementById('open-shop-btn').addEventListener('click', openForBusiness);
            document.getElementById('manage-menu-btn').addEventListener('click', manageMenu);
            document.getElementById('repair-grill-btn').addEventListener('click', repairGrill);
            
            // 绑定升级按钮
            document.getElementById('buy-upgrade-1').addEventListener('click', () => buyUpgrade(1));
            document.getElementById('buy-upgrade-2').addEventListener('click', () => buyUpgrade(2));
            document.getElementById('buy-upgrade-3').addEventListener('click', () => buyUpgrade(3));
            
            // 日志清除按钮
            document.getElementById('clear-log').addEventListener('click', function() {
                gameState.eventLog = [];
                addLogEvent("日志已清除", "info");
            });
        }
        
        // 初始化游戏
        function initGame() {
            // 添加初始日志
            addLogEvent("欢迎来到烧烤大亨专业版！", "success");
            addLogEvent("拥有初始资金¥1000，第一天准备开业", "info");
            addLogEvent("提示：先采购食材，然后开门营业", "info");
            
            // 绑定事件
            bindEventListeners();
            
            // 更新UI
            updateGameUI();
        }

        // 启动游戏
        window.onload = function() {
            initGame();
        };
    </script>
</body>
</html>